<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		#box{
			width:300px;
			height:300px;
			background: black;
			position: relative;
			cursor: move;
		}
		#box2{
			width:300px;
			height:300px;
			background: red;
			position: relative;
			cursor: move;
		}
	</style>
	<body>
		<div id="box">DIV</div>
		<div id="box2" draggable="true">DIV</div>
	</body>
	<script type="text/javascript" src="jquery-2.1.0.js"></script>
	<script type="text/javascript">
		$("#box").mousedown(function(e){
			$(document).mousemove(function(e){
				let W = $("#box").width()/2;
				let H = $("#box").height()/2;
				let X = e.clientX - W;
				let Y = e.clientY - H;
				$("#box").offset({ top: Y, left: X });
			})
			$(document).mouseup(function(e){
				$(this).unbind('mousemove');
			})
		})
		
		$("#box2").on('dragend',function(e){
			let W = $(this).width()/2;
			let H = $(this).height()/2;
			let X = e.originalEvent.x - W;
			let Y = e.originalEvent.y - H;
			$(this).offset({ top: Y, left: X });
		})
	</script>
</html>
